@include('Admin.public.head')
<style type="text/css">
  .am-btn-group am-btn-group-xs{
    text-align: center;
    margin-left: 18%;
  }
  #specs_btn{

    margin-top: 8px;
    border-radius: 10px;
    width: 74px;
    color: #5db95d;
  }
</style>
<body>
@include('Admin.public.menu')

<div class=" admin-content" id="app">
  {{csrf_token()}}
  <div class="daohang">

  </div>
  <div class="admin-biaogelist">
    <div class="listbiaoti am-cf">
      <ul class="am-icon-flag on"> 栏目名称</ul>

      <dl class="am-icon-home" style="float: right;"> 当前位置： 首页 > <a href="#">文章分类列表</a></dl>

      <dl>
        <a type="button" href="{{url('/admin/goods/caseClassifyAdd')}}" class="am-btn am-btn-danger am-round am-btn-xs am-icon-plus"> 添加文章分类</a>
      </dl>
    </div>
    <div class="am-btn-toolbars am-btn-toolbar am-kg am-cf">
      <ul>
        <li><input type="text" class="am-form-field am-input-sm am-input-xm" v-model="search.keyword" placeholder="关键词搜索" /></li>
        <li><button type="button" class="am-btn am-radius am-btn-xs am-btn-success" v-on:click="searchs()" style="margin-top: -1px;">搜索</button></li>
      </ul>
    </div>
    <form class="am-form am-g">
      <table width="100%" class="am-table am-table-bordered am-table-radius am-table-striped">
        <thead>
        <tr class="am-success">
		  <th >排序</th>
          <th >分类ID</th>
          <th >分类名称</th>
          <th >分类描述</th>
          <th >封面图</th>
          <th >添加时间</th>
          <th >操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="val,index in shopList">
		  <td>@{{ val.sort }}</td>
          <td>@{{ val.id }}</td>
          <td>@{{ val.name }}</td>
          <td>@{{ val.detail }}</td>
          <td><img :src="val.pic" width="50" alt=""></td>
          <td class="am-hide-sm-only">@{{ val.created_at }}</td>
          <td style="width: 8%;">
            <div class="am-btn-toolbar">
              <div class="am-btn-group am-btn-group-xs">
                <button type="button" title="编辑" class="am-btn am-btn-default am-btn-xs am-text-secondary" v-on:click="edit(val.id)"><span class="am-icon-pencil-square-o"></span></button>
                <button type="button" title="删除" class="am-btn am-btn-default am-btn-xs am-text-danger am-round" v-on:click="del(val.id,index)"><span class="am-icon-trash-o"></span></button>
                <br/>
              </div>
            </div>
          </td>
        </tr>
        </tbody>
      </table>
      <ul class="am-pagination am-fr">
        <div class="block">
          <el-pagination
                  background
                  :page-size="PagesData.per_page"
                  :current-page = "PagesData.current_page"
                  layout="total , prev, pager, next"
                  :total="PagesData.total"
                  @prev-click="changeClick"
                  @next-click="changeClick"
                  @current-change="changeClick">
            >
          </el-pagination>
        </div>
      </ul>
    </form>

    <script>
      var app = new Vue({
        el:"#app",
        data: {
          shopList : [], //商品列表
          search:{
            cid:'', //商品一级分类
            two_tid:'',//商品二级分类
            status:'0', //上架下架
            keyword:'', //关键字
          },
          //商品分类
          categoryList :{},
          categoryLists :{},
          PagesData:[],//分页
        },
        //事件
        methods: {
          //选择当前页
          changeClick:function(e){
            var rico = this
            $.get("/admin/goods/caseClassify",{'_token':'{{csrf_token()}}',class:'select',page:e},function (res) {
              if(res.code){
                app.shopList = res.data.data
                app.PagesData = res.data
              } else {
                layer.msg(res.data);
              }
            });
          },
          initialize:function () {
            $.post("/admin/goods/caseClassify",{'_token':'{{csrf_token()}}',class:'select'},function (res) {
              if(res.code){
                app.shopList = res.data.data
                app.PagesData = res.data
              } else {
                layer.msg(res.data);
              }
            });

          },
          //搜索
          searchs:function (id) {
            $.post("/admin/goods/caseClassify",{'_token':'{{csrf_token()}}',class:'select',keyword:app.search},function (res) {
              if(res.code){
                app.shopList = res.data.data
                app.PagesData = res.data
              } else {
                layer.msg(res.data);
              }
            });
          },
          //编辑
          edit:function (id) {
            window.location.href="/admin/goods/caseClassifyAdd?id="+id;
          },

          //删除
          del:function (id,index) {
            $.post("/admin/goods/caseClassify",{'_token':'{{csrf_token()}}',class:'delete',id:id},function (res) {
              if(res.code){
                app.shopList.splice(index,1)
              } else {
                layer.msg(res.data);
              }
            });
          },

        },
        //自动执行
        mounted: function () {
          this.initialize();//分公司
        },
      })
    </script>
@include('Admin.public.foot')